<style lang="stylus" scoped>
  .container
    position absolute
    height 100%
    width 100%
    box-sizing border-box
    padding-top  4rem
    padding-bottom 5.5rem
    .data-swiper
      padding: 0 1rem;
      height 100%
    .bonusEarning
      width: 100%;
      height: 8.4rem;
      background: rgba(0,0,0,.5);
      border: 1px solid #a18b5f;
      border-radius: 1rem;
      box-sizing: border-box;
      padding: .5rem 2rem;
      h3
        font-size: 1.375rem;
        font-weight: bold;
        color: white;
        height: 2.875rem;
        display: flex;
        align-items: flex-end;
      .bonushd
        display: flex;
        align-items: center;
        justify-content: space-between;
        .bonusNum
          display: flex;
          width: 70%;
          font-size: 2.5rem;
          color: white;
        .rechargeBtn
          width: 30%;
          .recharge
            display: block;
            border: 1px solid #a18b5f;
            width: 100%;
            height: 2.8rem;
            line-height: 2.7rem;
            border-radius: 1rem;
            color: #fff;
            text-align: center;
            font-size: 1.25rem;
    .bonusDetails
      width: 100%;
      background: rgba(0,0,0,.5);
      border: 1px solid #a18b5f;
      border-radius: 1rem;
      box-sizing: border-box;
      padding: 2rem 1rem;
      .pools
        width: 100%;
        display: flex;
        justify-content: center;
        p
          font-size: 1.375rem;
          color: white;
        a 
          display: flex;
          margin-left: 1rem;
          align-items: center;
          color: white;
      .bonusImg
        position: relative;
        width: 100%;
        border-bottom: 1px solid #3caef5;
        .pic1
          width: 100%;
          height: 250px;
      .bonuskeys
        width: 100%;
        height: auto;
        .bonuskeysHd
          width: 100%;
          text-align: center;
          h3
            font-size: 1.5rem;
            color: white;
            padding: 1rem 0;
        .layerBd
          display: block !important;
          padding: 0 !important;
          background: none !important;
        .myKeysBox
          display: flex;
          overflow: hidden;
          height: 11.5rem !important;
          width: 100% !important;
          position: relative;
          padding-bottom: 1.25rem;
          padding-top: 1rem;
          .list
            flex: 1;
            text-align: center;
            transform: translateY(50%);
            transition: 1s;
            -webkit-transition: 1s;
            p
              font-size: 1rem;
              color: white;
              font-weight: normal;
              line-height: normal;
            span 
              display: inline-block;
              height: 100%;
              background: #eecf7a;
              border-top-left-radius: 10px;
              border-top-right-radius: 10px;
              width: 50%;
        .myKeysBall
          display: flex;
          margin-top: 1rem;
          width: 100% !important;
          height: auto !important;
          justify-content: space-around;
          align-items: center;
          span 
            display: inline-block;
            width: 2.5rem;
            height: 2.5rem;
            line-height: 2.5rem;
            text-align: center;
            color: black;
            font-size: 1rem;
            font-weight: bold;
            background: url(../assets/blueBallLight.png) no-repeat center center;
            background-size: 100% 100%;
</style>

<template>
  <div class="bonus">
    <navTop :title="title"></navTop>
    <div class="container">
      <swiper class="data-swiper" :options="swiperOption">
        <swiper-slide class="slide">
          <div class="bonusEarning">
            <h3>我的分红</h3>
            <div class="bonushd">
                <div class="bonusNum"><p>0</p>	ETH</div>
                <div class="rechargeBtn">
                  <a class="recharge" @click="popupbtn">提现</a>
                </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide class="slide">
          <div class="bonusDetails">
            <div class="pools">
              <p>分红池</p>
              <a class="poolsBtn"><i class="iconfont icon-wenhao"></i></a>
            </div>
            <div class="bonusImg">
              <div class="pic1" ref="myChart">
                <div>分红池 <br> 0 ETH</div>
              </div>
            </div>
            <div class="bonuskeys">
              <div class="bonuskeysHd">
                <h3>分红分布</h3>
              </div>
              <div class="layerBd">
                <div class="myKeysBox">
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                  <div class="list">
                    <p>0</p>
                    <span></span>
                  </div>
                </div>
                <div class="myKeysBall">
                  <span>0</span>
                  <span>1</span>
                  <span>2</span>
                  <span>3</span>
                  <span>4</span>
                  <span>5</span>
                  <span>6</span>
                  <span>7</span>
                  <span>8</span>
                  <span>9</span>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <mymask v-show="popup"></mymask>
    <Popup v-show="popup" txt="暂无可提现分红！"></Popup>
  </div>
</template>

<script>
import navTop from '../components/navTop'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import mymask from '../components/mask'
import Popup from '../components/Popup'
export default {
  data(){
    return {
      title:"分红",
      popup:false,
      swiperOption:{
        direction: 'vertical',
        freeMode: true,
        autoHeight:true,
        slidesPerView :'auto',
        spaceBetween:8
      }
    }
  },
  mounted(){
    this.drawLine();
  },
  components:{
    navTop,
    swiper,
    "swiper-slide":swiperSlide,
    mymask,
    Popup
  },
  methods:{
    href(){
      this.$router.push('/home')
    },
    popupbtn(){
      return this.popup = !this.popup
    },
    drawLine(){
      let myChart = this.$echarts.init(this.$refs.myChart)
      myChart.setOption({
        backgroundColor: 'transparent',
        title: {
          text: '',
          left: 'center',
          top: 0,
          textStyle: {
            color: '#ccc'
          }
        },
        tooltip : {
          trigger: 'item',
          formatter: "{b} <br/> {c} ETH"
        },
        series: [
          {
            name:'Bonus Keys',
            type:'pie',
            clockwise:'true',
            startAngle:'0',
            radius : '51%',
            center: ['50%', '45%'],
            data:[
              {
                value:0,
                name:'分红池',
                itemStyle:{
                  normal:{
                    color:'#a93be5',
                  }
                },
                label: {
                  normal: {
                    show: true,
                    formatter: '{b}' + '\n' + '{c}' + ' ETH',
                    textStyle: {
                      color: 'white',
                      fontSize: '12'
                    }
                  }
                }
              },
              {
                value:0,
                name:'预期分红',
                itemStyle:{
                  normal:{
                    color:'#ffb625',
                  }
                },
                label: {
                  normal: {
                    show: true,
                    formatter: '{b}' + '\n' + '{c}' + ' ETH',
                    textStyle: {
                      color: 'white',
                      fontSize: '12'
                    }
                  }
                }
              }
            ]
          }
        ]
      });
    }
  }
}
</script>
